import { Menu, Button ,Layout   } from 'antd';
import React, { useContext ,useEffect,useState } from 'react';
import img from '../../assets/logo.jpg'
import {
  AppstoreOutlined,
  MenuUnfoldOutlined,
  MenuFoldOutlined,
  PieChartOutlined,
  DesktopOutlined,
  ContainerOutlined,
  MailOutlined, 
  } from '@ant-design/icons';
import { withRouter } from 'react-router-dom';
import { inject,observer } from 'mobx-react';
import { routerList } from '../../utils/router';
const {Sider} = Layout 


const { SubMenu } = Menu;

function Menu1(props:any) {

  const {location,history} = props

  function handleItemClick(item:any){
    history.push(item.key)
  }
  const {userInfo,collapsed,flag} = props.info

  const renderMenuItem = (list:any)=>{

    if(userInfo){
      return list.map((l: any,i: any)=>{
        if(l.children){
          if(userInfo.role *1 <l.premission){
            return null
          }else{
            return(
                <SubMenu className={flag?"changeClass":""} key={l.path} icon={l.icon} title={l.text}>
                {renderMenuItem(l.children)}
              </SubMenu>
            )
          }
        }else{
          if(userInfo.role*1<l.premission){
            return null
          }else{
            return(
                <Menu.Item className={flag?"changeClass":""} key={l.path} icon={l.icon}>
               {l.text}
              </Menu.Item>
            )
          }
        }
      })
    }else{
      return null
    }
  }
  console.log(flag);
  
  
 

  
    return (
      <Sider style={{background:'#fff'}}  collapsed={collapsed} width={256} className={flag?"changeClass":"site-layout-background"}>
      <div style={{width:'100%',boxSizing:'border-box'}}>
      <img src={img} style={{width:'100%'}} alt="" />
    </div>
      <Menu
      className={flag?"changeClass":""}
      onClick={handleItemClick}
        defaultSelectedKeys={[location.pathname]}
        defaultOpenKeys={[location.pathname.split('/').splice(0,3).join('/')]}
        mode="inline"
        theme="light"
      >
       {renderMenuItem(routerList)}
      </Menu>
    
    </Sider>
    )
}
export default inject('info')(withRouter(observer(Menu1)))